import React, { useState,useEffect } from 'react';
import { View, Text, Image, TouchableOpacity, ScrollView, TextInput } from 'react-native';
import styles from './styles'
import Icon from 'react-native-vector-icons/AntDesign';
import IconFeather from 'react-native-vector-icons/Feather'
import { dp } from '@/utils/index';
import { useNavigation,useRoute,RouteProp } from '@react-navigation/native';
import {RouterParamsList} from 'src/router/types'
type  routeProp=RouteProp<RouterParamsList,'Collection'>
const Collection = (props: any) => {
  const [searchVal, setsearchVal] = useState("");
  const [listType, setlistType] = useState('2');
  const navigation = useNavigation()
  const Router = useRoute<routeProp>()
  useEffect(()=>{
    setlistType(Router.params.type)
  },[])
  const searchChange = (text: any) => {
    setsearchVal(text)
  }
  const clearIpt = () => {
    setsearchVal("")
  }
  return (
    <ScrollView style={{ backgroundColor: 'rgba(14, 11, 31, 1)' }}>
      <View>
        <View style={styles.search}>
          <View style={styles.search_main}>
            <Icon name="search1" size={dp(18)} color="#eee"></Icon>
            <View style={styles.ipt}>
              <TextInput
                style={{ height: dp(30), borderColor: '#292D39', borderWidth: 0, color: '#eee' }}
                onChangeText={text => searchChange(text)}
                value={searchVal}
                placeholder="请输入"
                placeholderTextColor="#71737B"
                selectionColor="#CBFB5E"
              />
            </View>
            <Text>
              {
                (searchVal) && <TouchableOpacity activeOpacity={0.9} onPress={clearIpt}><Icon name="closecircleo" size={dp(18)} color="#eee"></Icon></TouchableOpacity>
              }
            </Text>
          </View>
        </View>
        <View style={styles.list}>
          {listType === '1' && (<View style={styles.list_search}>
            <View style={styles.list_search_li}>
              <View style={styles.list_search_left}>
                <Image
                  style={styles.list_search_left.img}
                  source={require('src/assets/images/Ellips.png')}
                />
              </View>
              <View style={styles.list_search_right}>
                <Text style={styles.list_search_right.p1}>Rulia and Remé</Text>
                <Text style={styles.list_search_right.p2}>Jeeny Benmy</Text>
              </View>
            </View>
            <View style={{ alignItems: 'center' }}>
              <Text style={styles.list_search_btn}>
                Add New Playlist
              </Text>
            </View>

          </View>)}
          {listType !== '1' && (<View style={styles.list_main}>
          <View style={styles.list_main_li}>
            <View style={styles.list_main_left}>
              <Text style={styles.sort}>01</Text>
              <View style={listType === '2' ? styles.main_img : styles.main_img48}>
              <Image
                  style={{width:'100%',height:'100%'}}
                  source={require('src/assets/images/Ellips.png')}
                />
              </View>
            </View>
            <View style={[styles.list_main_right, listType !== '2' && styles.list_main_right247]}>
              <View style={[styles.list_main_right_flex,listType !== '2' && {marginTop:dp(15)}]}>
                <View >
                <Text style={styles.list_search_right.p1}>Rulia and Remé</Text>
                  {listType === '2' && (<Text style={styles.list_search_right.p2}>Jeeny Benmy</Text>)}
                </View>
                <View>
                  <IconFeather name="more-horizontal" size={dp(18)} color="#eee"></IconFeather>
                </View>
              </View>
            </View>
          </View>
        </View>)}
        </View>
      </View>
    </ScrollView>
  )
};

export default Collection;